<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-组件创建三</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <vm-component3></vm-component3>
</div>
<template id="temp">
    <div>
        <form action="#">
            <p>用户名: <input type="text" name="username" v-model="username"></p>
            <p>密码:  <input type="password" name="password" v-model="password"></p>
            <button @click="fun1">提交</button>
        </form>
    </div>

</template>
<script>
    const vmComponent = Vue.extend({
       template:"#temp",
       data(){
          return{
              username:undefined,
              password:undefined,
          }
       },
        methods:{
           fun1:function () {
               alert("提交成功")
           }
        }
    });

    // 注册组件
    Vue.component("vm-component3",vmComponent);


    let vm = new Vue({
        el: "#app",
        data: {}
    });
</script>


</body>
</html>